import React, {Component} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Dropdown,
  Popover,
  InputNumber,
  DatePicker,
  message,
  Badge,
  Divider,
  Steps,
  Spin,
  Upload,
  Collapse, Empty,Cascader,
  Select, Button, Table, Modal
} from 'antd';
const { Panel } = Collapse;
const {MonthPicker, RangePicker} = DatePicker;
const Option = Select.Option;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const FormItem = Form.Item;

@Form.create()
export default class UpdateModal extends Component {
  state ={

    //city_name : '',
    city_id : '',

  }
  constructor(props) {
    super(props);
    const {updateData} = props
    this.state = {
      //city_name : updateData.city_name?updateData.city_name:'',
      city_id :  updateData.city_id?updateData.city_id:'',
    }
  }
  handleCityChange = (value, selectedOptions)=>{
    console.log(value);
    console.log(selectedOptions);
    const cityNameList = selectedOptions.map((item)=>{
      return item.label
    })
   // const cityName = cityNameList.join('-');
    const cityId = value.join(',');
    this.setState({
      //city_name:cityName,
      city_id:cityId
    })
  }
  render() {
    const {
      updateModalVisible ,
      clseModal,
      city_list,
      type_list,
      updateModalSubmit,
      updateData,
      form:{
        getFieldDecorator
      }
    }= this.props;
    const onOk = e =>{
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if (err) return
        if (this.state.city_id){
         // values.city_name= this.state.city_name;
          values.city_id= this.state.city_id;
        }
        values.hotel_id = updateData.hotel_id;
        console.log(values);
        updateModalSubmit(values);
      })
    }
    return (
      <Modal
        visible={updateModalVisible}
        title="编辑酒店基础信息"
        onCancel={clseModal}
        destroyOnClose={true}
        maskClosable={false}
        width={`${document.body.clientWidth * 0.6}px`}
        onOk = {onOk}
      >
        <form layout="inline" >
          <FormItem
            {...formItemLayout}
            label="酒店标题"
            required={true}
          >
            {getFieldDecorator('hotel_title', {
              initialValue: updateData ? updateData.hotel_title : undefined,
              validateTrigger: ['onChange', 'onBlur'],
              rules: [
                {
                  required: true,
                  message: '酒店标题必填',
                },
              ],
            })(
              <Input style={{ width: '80%' }} placeholder="请输入" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="酒店类型"
            required={true}
          >
            {getFieldDecorator('type', {
              initialValue: updateData ? updateData.type : undefined,
              validateTrigger: ['onChange'],
              rules: [
                {
                  required: true,
                  message: '酒店类型必填',
                },
              ],
            })(
              <Select   placeholder="请选择"  style={{ width: '80%' }}>
                {
                  type_list.map((item)=>{
                    return  (
                      <Option key={item.value} value={item.value}>
                        {item.name}
                      </Option>
                    )
                  })
                }
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="其他内容(副标题)"
          >
            {getFieldDecorator('other_content', {
              initialValue: updateData ? updateData.other_content : undefined,
            })(
              <Input style={{ width: '80%' }} placeholder="请输入" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="所属城市"
          >
            {getFieldDecorator('cityCascader', {
              initialValue: updateData && updateData.city_id ? updateData.city_id.split(',') : undefined,
            })(
              <Cascader options={city_list}  onChange={this.handleCityChange}  style={{ width: '80%' }}		allowClear  placeholder="请选择" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="地址"
          >
            {getFieldDecorator('city_name', {
              initialValue: updateData ? updateData.city_name : undefined,
            })(
              <Input style={{ width: '80%' }} placeholder="请输入" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="评论条数"
          >
            {getFieldDecorator('assess_num', {
              initialValue: updateData ? updateData.assess_num : undefined,
            })(
              <Input style={{ width: '80%' }} placeholder="请输入" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="评分"
          >
            {getFieldDecorator('score', {
              initialValue: updateData ? updateData.score : undefined,
            })(
              <InputNumber max={5} min={1} placeholder="请输入(最大5)"  style={{ width: '80%' }} />
            )}
          </FormItem>
        </form>
      </Modal>
    )
  }
}